<script lang="ts" setup>
	import { ref } from 'vue'
	import { patientListApi, removePatientApi } from '@/apis/patient'
	import { useConsultStore } from '@/stores/consult'
	import type { PatientItem } from '@/types/patient.d.ts'
	import { onShow } from '@dcloudio/uni-app'

	// 接收 props 的参数
	const props = defineProps<{ type: string }>()

	const swipeOptions = ref([
		{
			text: '删除',
			style: {
				backgroundColor: '#dd524d',
				color: '',
				fontSize: '',
			},
		},
	])

	// 获取列表
	const list = ref([] as PatientItem[])
	// 页面显示，路由返回都会触发
	onShow(async () => {
		const res = await patientListApi()
		// console.log(res)
		list.value = res
	})

	// 身份证号脱敏的代码
	const secretIDCard = (idCard: string) => {
		return idCard.replace(/^(.{6}).+(.{4})$/, '$1********$2')
	}

	// 点击删除
	const removeItem = (item) => {
		console.log('删了~')
		uni.showModal({
			title: '提示',
			content: `真的要删掉${item.name}吗?`,
			showCancel: true,
			success: async (e) => {
				if (e.confirm === true) {
					// console.log('删')
					await removePatientApi(item.id)
					// 删掉了(本地更新)
					// 调接口，直接删本地（这一份数据，可以操纵的人不多）
					// 重新调用接口，会浪费 服务器的性能
					// 倾向于直接删除本地
					// 保证，服务器的更新完毕之后，再更新本地（购物车）
					list.value = list.value.filter((v) => v.id !== item.id)
					// 删除仓库中 保存的患者 id 避免后续无操作
					store.patientId = ''
				} else {
					// console.log('取消了')
				}
			},
		})
	}

	// 动态修改标题
	if (props.type === 'consult') {
		uni.setNavigationBarTitle({
			title: '选择患者',
		})
	}

	// 仓库数据
	const store = useConsultStore()

	// 点击选择不同的患者
	const selPatient = (id: string) => {
		store.patientId = id
	}

	// 确认订单页面
	const go = () => {
		uni.navigateTo({
			url: '/subpkg_consult/payment/payment',
		})
	}
</script>

<template>
	<scroll-page>
		<view class="archive-page">
			<view class="archive-tips">最多可添加6人</view>

			<uni-swipe-action>
				<!-- 可以配置侧滑效果 -->
				<!-- uni-swipe-action-item的点击事件，是帮顶给侧滑按钮的 -->
				<uni-swipe-action-item
					v-for="item in list"
					:key="item.id"
					:right-options="swipeOptions"
					@tap="removeItem(item)"
				>
					<view
						@tap="selPatient(item.id)"
						class="archive-card"
						:class="{ active: store.patientId === item.id }"
					>
						<view class="archive-info">
							<text class="name">{{ item.name }}</text>
							<text class="id-card">{{ secretIDCard(item.idCard) }}</text>
							<!-- defaltFlag 1 默认 0 不是默认 -->
							<text v-if="item.defaultFlag === 1" class="default">默认</text>
						</view>
						<view class="archive-info">
							<text class="gender">{{ item.genderValue }}</text>
							<text class="age">{{ item.age }}岁</text>
						</view>
						<navigator
							hover-class="none"
							class="edit-link"
							:url="`/subpkg_archive/form/form?id=${item.id}`"
						>
							<uni-icons
								type="icon-edit"
								size="20"
								color="#16C2A3"
								custom-prefix="iconfont"
							/>
						</navigator>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<!-- 添加按钮 -->
			<view v-if="list.length < 6 && type !== 'consult'" class="archive-card">
				<navigator class="add-link" hover-class="none" url="/subpkg_archive/form/form">
					<uni-icons color="#16C2A3" size="24" type="plusempty" />
					<text class="label">添加患者</text>
				</navigator>
			</view>
			<!-- type=consult 选择了患者 -->
			<view v-if="type === 'consult' && store.patientId !== ''">
				<button @click="go" class="uni-button">下一步</button>
			</view>
		</view>
	</scroll-page>
</template>

<style lang="scss">
	@import './index.scss';
</style>
